import Taro from '@tarojs/taro'
import {View, Text} from '@tarojs/components'
import {connect} from '@tarojs/redux'
import {AtInput, AtButton} from 'taro-ui'
import validator from 'validator.tool'

import './index.less'

@connect(state => ({
  loading: state.loading.effects['customer/login'],
  project: state.project,
}))
export default class Index extends Taro.Component {

  config = {
    navigationBarTitleText: '登录'
  }

  constructor () {
    super(...arguments)

    this.state = {
      phone: '',
      code: '',
      disabled: false,
      second: 60,
    }
  }

  componentDidShow() {
  }

  navigateTo = url => {
    Taro.navigateTo({url})
  }

  onInputChange = (stateName, value) => {
    this.setState({
      [stateName]: value
    })
  }

  sendCode = () => {
    const {phone, disabled} = this.state;

    // validate phone
    const v = new validator();
    if (!v.isPhone(phone)) {
      Taro.showToast({
        title: '请输入正确的手机号码',
        icon: 'none',
        duration: 1000,
      });
      return;
    }

    if (disabled) {
      return;
    }

    this.setState({
      disabled: true
    });

    // 倒计时
    const timer = setInterval(() => {
      if (this.state.second > 0) {
        this.setState({
          second: this.state.second - 1
        })
      } else {
        this.setState({
          second: 60,
          disabled: false
        });
        clearInterval(timer)
      }
    }, 1000);

    this.props.dispatch({
      type: 'customer/sms',
      payload: {
        phone,
      },
    });
  }

  onLogin = () => {
    const {phone, code} = this.state;

    // validate
    const v = new validator();
    let title = '';
    if (!v.isPhone(phone)) {
      title = '请输入正确的手机号码';
    } else if (!code) {
      title = '请输入验证码';
    }
    if (title) {
      Taro.showToast({
        title,
        icon: 'none',
        duration: 1000,
      });
      return;
    }

    // do
    this.props.dispatch({
      type: 'customer/login',
      payload: {
        phone,
        code,
      },
    });
  }

  render() {
    const {loading} = this.props;
    const {disabled, second} = this.state;
    const tipText = disabled ? `${second}s后重试` : '发送验证码';

    return (
      <View className='container'>
        <Text className='base-title'>您好，请登录</Text>
        <Text className='title-des'>登录后可使用更多功能</Text>
        <View className='form'>
          <AtInput
            name='phone'
            type='phone'
            placeholder='请输入手机号码'
            value={this.state.value}
            onChange={this.onInputChange.bind(this, 'phone')}
          />
          <AtInput
            name='code'
            type='number'
            placeholder='请输入验证码'
            value={this.state.code}
            onChange={this.onInputChange.bind(this, 'code')}>
            <View
              style={{
                'color': this.state.disabled ? '#FF4949' : '',
                'fontSize': '12px',
                'width': '90px'
              }}
              onClick={this.sendCode.bind(this)}
            >
              {tipText}
            </View>
          </AtInput>
          <AtButton loading={loading} customStyle={{marginTop: '20px', color: '#fff', background: '#8A9DEA', border: 'none'}} type='primary' onClick={this.onLogin}>提交</AtButton>
          <View className='foot-txt'>
            尚未注册？去<Text className='to-reg' onClick={this.navigateTo.bind(this, `/pages/register/index`)}>注册</Text>
          </View>
        </View>
      </View>
    )
  }
}